<template>
  <div class="data-analy-box">
    <div style="width: 100%; max-height: 300px">
      <div
        style="height: 300px; overflow: hidden"
        v-if="chartsData && Object.keys(chartsData).length > 0"
      >
        <!-- <ak-echart :option="option" :repaint="true" /> -->
        <div id="myChart" :style="{ width: '550px', height: '300px' }"></div>
      </div>
      <div v-else style="text-align: center">
        <span class="el-table__empty-text">暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script>
import mixDistrict from './option'
import AkEchart from '@/components/gisPageComponents/echarts'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapStateForm, mapMutations: mapMutationsForm } =
  createNamespacedHelpers('gisForm')
import { getUserTrendList } from '@/apis/gis'
export default {
  name: 'DataAnalysisEcharts',
  mixins: [mixDistrict],
  components: { AkEchart },
  props: ['type', 'chartsData'],
  data: () => ({
    mncList: [
      { value: '0', label: '移动', color: '#afe26c' },
      { value: '1', label: '联通', color: '#ea3324' },
      { value: '11', label: '电信', color: '#487ec2' }
    ],
    chartsData: []
  }),
  created() {
    // this.initJudgeEcharts()
  },

  computed: {
    ...mapState(['home', 'gisForm'])
  },
  watch: {
    chartsData: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        this.chartsData = newVal
        const dom = document.getElementById('myChart')
        if (dom) {
          this.drawLine()
        }
      }
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.echarts.init(document.getElementById('myChart'))
      // 绘制图表
      const params = this.setChartsData(this.chartsData)
      const opt = this.getOption(params)
      this.option = opt
      myChart.setOption(this.option)
    },
    setChartsData(list) {
      const legendList = this.mncList.filter(
        v => list.map(item => item.mnc).indexOf(v.value) != -1
      )
      const legendData = legendList.map(item => item.label)
      let colorList = legendList.map(item => item.color)
      colorList.reverse()
      const xAxisData = list[0].dayNumList.map(item => item.day)
      let seriesData = []
      list.forEach((item, index) => {
        const dayNumList = item.dayNumList.map(item => item.num)
        seriesData.push({
          data: dayNumList,
          name: legendData[index]
        })
      })
      return { legendData, colorList, xAxisData, seriesData }
    }
  }
}
</script>
